這次將介紹v-on的用法

v-on

用法是相當單純的，跟一般html5的onclick,onselect...等雖然其實差別不大，不過v-on的功能卻更強大，用法更簡單，今天只會介紹基本的部分，更多的用法會在日後慢慢提到

• 在這邊我先定義num且其值為1

  data:{
      num:1,
    },
  

• 之後新增一個按鈕

  button(v-on:click="num+=1") +1
  

  v-on 可以用來監聽事件，這邊是指當click發生時，就將num+1
  v-on 可以簡寫為@，如下

  button(@click="num+=1") +1
  

  其效果是相同的，都是將num+1

methods

methods顧名思義就是在這邊定義方法(function)

• 以上面的num+=1為例
  定義一個方法為addNum

  methods:{
      addNum() {
        this.num+=1; 
      },
  }
  

  呼叫的方法如下

  button(@click="addNum") +1
  

  定義多個方法以" , "分開如下

  methods:{
      addNum() {
          this.num+=1; 
      },
      deNum() {
          this.num-=1; 
      },
  }
  

  一樣多一個按鈕去呼叫deNum

  button(@click="addNum") +1
  button(@click="deNum") -1
  

延續前一天的資料

先將原本的fruits改由datas取代之後再將datas指定給fruits(這裡的datas是在vm之外的)

var datas = [
    {
        "fruit": "蘋果",
        "color": "red",
        "show": false
    },
    {
        "fruit": "香蕉",
        "color": "yellow",
        "show": false
    },
    {
        "fruit": "哈密瓜",
        "color": "green",
        "show": true
    },
    {
        "fruit": "葡萄",
        "color": "purple",
        "show": true
    },
    {
        "fruit": "橘子",
        "color": "orange",
        "show": true
    },
    {
        "fruit": "火龍果",
        "color": "red",
        "show": true
    },
    {
        "fruit": "芭樂",
        "color": "green",
        "show": true
    },
    {
        "fruit": "柳丁",
        "color": "orange",
        "show": true
    },
    {
        "fruit": "奇異果",
        "color": "green",
        "show": true
    }
];

然後vm中將fruits定義為空陣列

data:{
    title: "讓資料美美的#4",
    subtitle:"這次將介紹v-on的用法",
    num:1,
    fruits:[],
},

在新增兩個按鈕與方法

button(@click="setdata") 載入資料
button(@click="deldata") 刪除資料

methods:{
    setdata() {
      this.fruits = datas; 
    },
    deldata() {
      this.fruits = []; 
    },
}

setdata的用意為將datas的資料帶入到fruits裡面，帶入之後fruit的資料就可以向前一天一樣顯示出來
deldata則是將fruits清空變為空陣列，資料就會被從網頁上刪除
運用這種方式可以自由的切換想顯示的資料

本次的程式碼 https://codepen.io/FanWay/pen/baBdxB